<template>
    <div>
        <a-modal v-model="visible"
                 :title="title"
                 @ok="handleOk"
                 @cancel="cancel"
                 centered
                 width="40em"
                 :cancelText="cancelText"
                 :okText="okText">
            <a-form-model
                    ref="form"
                    :model="college"
                    :label-col="{ span: 5 }"
                    :wrapper-col="{ span: 16 }"
                    :rules="rules"
            >
                <!--弹框信息设置-->
                <a-form-model-item label="学院名称" prop="collegeName">
                    <a-input placeholder="学院名称" v-model="college.collegeName" /><!--从mock中获取信息-->
                </a-form-model-item>
            </a-form-model>
        </a-modal>
    </div>
</template>

<script>
    import {mapState} from "vuex";

    export default {
        name: "AddCollege",
        data() {
            return {
                rules: {
                    collegeName: [{required: true, message: '请输入学院名字', trigger: 'change',max : 10}],
                    collegeId:[]
                },
                title: '新增学院',
                flag: false,
                visible:false,
                cancelText:'取消',
                okText: '新增',
                college: {
                    collegeName: '' ,// 记录添加学院的名字
                    collegeId:''     //记录添加学院Id
                }
            }
        },
        methods: {
            //表格编辑特定专业--根据记录record，判断是添加学院还是修改学院
            showModel(){
                this.college.collegeName = ''
                this.visible = true;//显示弹框
            },
            //确定时回调
            handleOk(){
                this.$refs.form.validate(value=>{
                    if(value){
                        this.$store.dispatch('college/collegeAdd', {token:this.accessState.token,name: this.college.collegeName,collegeId:this.college.collegeId})
                            .then((data) => {
                                this.$message.success(data.msg)
                                this.$emit('add')
                                this.visible = false
                            })
                            .catch((err) => {
                                this.$message.error(err.msg)
                            })
                    }else {
                        this.$message.error("请正确填写表单");
                    }
                })
            },
            //取消时回调
            cancel(){
                this.visible = false; // 隐藏弹框
                this.college.collegeName = '' // 初始化
              this.$refs.form.resetFields();
            }
        },
        computed: {
            ...mapState({ // 这个是提取store中access文件夹目录下的数据
                'accessState': 'access'
            })
        }
    }
</script>

<style scoped>

</style>
